import axios from '../../services'
import React, { memo, useEffect, useState } from 'react'
import { DropdownMenu, Cell, Switch } from 'react-vant'
import '../../css/BottomSearch.css'
function BottomSearch(props) {
    const [value1, setValue1] = useState({})
    const [value2, setValue2] = useState([])
    const [value3, setValue3] = useState([])
    const option1=[]
    const option2 = [
        { text: '价格由高到低', value: 'desc' },
        { text: '价格由低到高', value: 'asc' }
    ]
    const [option3,setOption3] = useState([])
    const [value, setValue] = useState({})
    function axiosMode3(list) {
        axios.get('/goods/list', {
            params: {
                page: 1,
                sieze: 20,
                order: 'desc',
                categoryId: 0,
                sort: 'id',
                keyword: '',
                ...list
            }
        }).then(res => {
            setOption3(res.data.filterCategory.map(item=>({
                text:item.name,
                value:item.id
            })))
            setValue3(res.data.data)
        })
    }
    function targetValue3(value) {
        props.setValue(value)
        props.setMode(3)
        props.setValueAno(value)
    }
    useEffect(() => {
        switch (props.mode) {
            case 1:
                axios.get('/search/index').then(res => {
                    setValue1(res.data)
                    props.setPlho(res.data.defaultKeyword.keyword)
                })
                return
            case 2:
                axios.get('/search/helper?keyword=' + props.value).then(res => {
                    setValue2(res.data)
                })
                return
            case 3:
                axiosMode3({
                    keyword: props.value
                })
                setValue({order: 'desc', categoryId: 0})
                return
        }
    }, [JSON.stringify(props)])
    switch (props.mode) {
        case 1:  //history and hotSearch
            return JSON.stringify(value1) === '{}' ? null : <div id='bottomsearchContainer1'>
                <ul>
                    <h4>历史记录</h4>
                    {
                        value1.historyKeywordList.map((item, index) => <span
                            onClick={() => {
                                targetValue3(item)
                            }}
                            key={index}>{item}</span>)
                    }
                    <h4>热门搜索：</h4>
                    {
                        value1.hotKeywordList.map(item => <span
                            onClick={() => {
                                targetValue3(item)
                            }}
                            key={JSON.stringify(item)}
                            className={item.is_hot ? 'hot' : null}
                        >{item.keyword}</span>)
                    }
                </ul>
            </div>
        case 2:  //user input search
            return <ul id='bottomsearchContainer2' >{
                value2.length ? value2.map((item, index) => <li key={index} onClick={() => {
                    targetValue3(item)
                }}>{item}</li>) : <span>没有更多了</span>
            }</ul>
        case 3: //goods list
            return <div  id='bottomsearchContainer3' >
                <DropdownMenu value={value} onChange={v => {
                    axiosMode3({
                        ...v,
                        keyword:props.value,
                        sort: 'price'
                    })
                    return setValue(v)
                }}>
                    <DropdownMenu.Item disabled title='全部'  name='value1' options={option1} />
                    <DropdownMenu.Item title='价格' name='order' options={option2} />
                    <DropdownMenu.Item title='分类' name='categoryId' options={option3} />
                </DropdownMenu>
                <ul>
                {
                value3.map( item => <li key={item.id} onClick={()=>{
                    props.history.push('/productDetail?id='+item.id)
                }}>
                        <img src={item.list_pic_url} alt="" />
                        <p>{item.name}</p>
                        <span>￥{item.retail_price.toFixed(2)}元</span>
                    </li>)
                    }
                </ul>
            </div>
    }
}
export default memo(BottomSearch)
